在定位网站布局时,需要考虑到这些布局的实现方法。网页的布局要有利于网页设计时的实际操作,有些布局是很不容易实现的。在实际操作中,常常是使用层或表格来实现网页的布局,这样的方式只能实现网页以一种区域划分的方式布局。假如在布局时,设计了一种圆形排列的布局,这是不容易实现的,不利于布局的实际制作完成。
1、使用表格布局页面
使用表格实现网页布局是最常用的布局实现方式。表格可以方便地实现网页区域的划分。用表格嵌套的方法,可以方便地实现网页区域的分割与组合。表格容易用边框实现很多种边框效果,操方便。布局就是使用表格实现的布局。这些内容在以后的章节中将会讲解
2、使用层结构布局
层是另一种网页布局方式,与表格布局的主要优点是可以方便地实现网页区域的定位使用多个层,每个层固定一个区域。通过对层的位置设置实现网页的布局表格是需要以一定的方式排列的,不同的表格与表格单元格之间存在着布局上的联系,但是层的操作是互相独立的。层可以更灵活地实现网页区域的定位,不同层的位置可以互不影响地调整。需要绝对定位一个网页区域时,常常使用一个层来实现。以后的章节将会讲解层布局的内容
3、常见的网页结构类型
在网页布局设计中,根据用户的使用习惯与设计经验,已经形成了一些比较认同的布局方式。网页的布局方式主要从用户使用的方便性、界面大方美观、网页特色等方面考虑
(1)“国”字型布局
国”字型布局是一种常见的网页布局。这是一个象形的说法,就是网页上一般上下各有一个通幅广告条,左面是主菜单或导航条,右面放友情链接或其他链接的内容,中间是网页的主要内容。这样布局可以充分利用网页的版面,信息量很大。一般的“国”字型网页的主要布局.
(2)“厂”字型布局
厂”字型布局是将网页的上部放置Logo与 Banner,在网站的左边放置导航条与其他链接,在网站的右下方布局网页的主要内容.这种布局的好处是网页的各个部分布局非常集中,可以在一个区域突出网页的重点内容,网页中的内容主次分明,很有层次感。
(3)“框架”型布局
框架”型布局是指以框架网页的形式实现网页的布局框架是在一个网页中的不同区域打开几个不同网页的方法。在一个包括有框架的网页中,框架会在每一个框架中打开不同的网页,这样框架就可以实现网页的布局.框架网页可以使用 Dreamweaver自动生成。如图7-5所示,在 Dreamweaver的新建网页窗口中选择“示例中的页”选项,并在后面的“示例文件夹”列表中选择“框架页”选项,即可在“示例页列表中选择自己所需要的框架网页。
新建的框架网页,实际上是生成一段包含不同网页的框架代码。框架只是将网页分割为几个不同的区域,每个区域装入不同的网页。与其他网页布局不同的是,其他的网页布局都是在一个网页上实现的,而框架布局是在几个不同的网页上实现的。
(4)“封面”型布局
对于资料类或阅读类、专辑类的网页,常使用“封面”型布局。封面型的网页常有一个精美的封面。封面使用较好效果的平面设计,并有几个链接或是只有一个“进入”链接。用户单击链接以后可进入网页的内容封面”型网页布局的网页结构常常很简单,需要使用精美的封面效果来体现网页的内容。
(5)Flash型布局
Flash动画有非常好的视觉效果,可以给用户带来很深的视觉印象。有些网站需要以一段 Flash来表现网站的内容,可以使用Fash布局网页的Fash布局常是在网页的首页放置一个较大的 Flash动画,动画播放完成以后,用户单击进入或重放动画。用户也可以直接跳过动画进入网页的内容。
Flash播放完以后,常会停止在一个提示界面上,需要用户选择“重新播放”动画还是“进入网页用户也可以直接单击进入网页的链接跳过动画。
(6)页面排版布局趋势
web20是一个新兴的网站设计技术概念。Web20的网页一般使用CSS+DIV实现网页的布局使用Ajax和XML与服务器进行数据交互。Web20网页的布局更加强调网站的专业性与网站的交互性。网站可以体现出强大的功能,网页在简单的布局中也可以体现出强大的功能。例如,“谷歌”与“百度”就是Web2.0网站优秀布局方式的代表,在一个简单的网页输入框中可以查询到所需要的知识。同时,在查询结果的网页中,高效地布局出用户所需要的内容。Google网站的首页和搜索结果页面,这种网页布局是web2.0网页布局的代表。网页的色彩和布局非常简洁,但可以体现出强大的网站功能和丰富的网站内容。
